// ***********************加载用户列表
$(function() {
    let layer;

    layui.use(['layer', 'laypage', 'form'], function() {
        let form = layui.form
        layer = layui.layer
        laypage = layui.laypage
        let data = {
                pagenum: 1,
                pagesize: 5
            }
            //封装渲染数据
        function xuanran() {
            $.ajax({
                url: '/admin/users',
                data: data,
                success: function(res) {
                    $('tbody').html('')
                    $.each(res.data, function(index, item) {
                        let tr = $(`<tr>
        <td>${item.id}</td>
        <td>${item.username}</td>
        <td>${item.nickname}</td>
        <td>${item.email}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-xs ">
            <a style="color: #fff" target="iframeArea" href="./edit.html?${item.id}?${item.username}?${item.nickname}?${item.email}">编辑</a>
          </button>
          <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" id="delete" iid=${item.id}>删除</button>
          <button type="button" class="layui-btn layui-btn-xs layui-btn-normal delete" idid=${item.id}>重置密码</button>
        </td>
        </tr>`)
                        $(`tbody`).append(tr)
                    })
                    bar(res.total);

                }

            })
        }
        xuanran()

        // ************************删除用户
        $('tbody').on('click', '#delete', function() {
            let id = $(this).attr('iid')
            layer.confirm('确定要删？？', function(index) {
                //do something

                console.log(id);
                $.ajax({
                    url: '/admin/users/' + id,
                    type: 'DELETE',
                    success: function(res) {
                        console.log(1);
                        layer.msg(res.message)
                        xuanran()
                    }
                })

                layer.close(index);
            })

        })

        function bar(count) {
            laypage.render({
                elem: 'articlePage', // 注意，这里的 test1 是 ID，不用加 # 号
                count: count, // 数据总数，从服务端得到,
                limit: data.pagesize, // limit限制 每页显示几条数据
                curr: data.pagenum,
                // limits: [2, 3, 5, 10], // 下拉框的值，表示每页多少条，选择每页显示几条
                // layout: ['prev', 'page', 'next', 'limit', 'skip'],  // 辅助

                // 当用户点击页面跳转的时候：
                jump: function(obj, first) {
                    // 用户自己点击 跳转
                    if (first == undefined) {

                        // obj是用户操作后对象数据  obj.curr
                        data.pagenum = obj.curr;
                        // ajax
                        xuanran();

                    }
                }
            });
        }

        // ***********************重置密码的form表单
        let str = `<form id="repwd-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
          <input type="text" name="password" required lay-verify="required|changdu" placeholder="请输入新密码" autocomplete="off" class="layui-input mima">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
          <input type="text" required lay-verify="required|same" placeholder="请重复输入新密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;
        form.verify({
            chongfu: function(value, item) { //value：表单的值、item：表单的DOM对象
                if (value != $('.newPwd').val()) {
                    return '密码不一致，请重新输入';
                }
            },
            changdu: [
                /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
            ],
            same: function(value, item) {
                if (value != $('.mima').val()) {
                    return '两次输入的密码不一致'
                }
            }
        })
        $('tbody').on('click', '.layui-btn-normal', function() {

            let index = layer.open({
                type: 1,
                content: str,
                area: ['500px', '300px'], //这里content是一个普通的String

            });


            $('#repwd-form').on('submit', function(e) {
                e.preventDefault()
                let data = $(this).serialize()
                let id = $('.layui-btn-normal').attr('idid')
                $.ajax({
                    url: '/admin/users/' + id,
                    type: 'PUT',
                    data: data,
                    success: function(res) {
                        layer.msg(res.message)
                        layer.close(index)
                        if (res.status == 0) {
                            xuanran()
                        }

                    }

                })
            })
        })

    })






})